<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<meta name="Description" content="随时掌握飞行动态">
<div style="display:none"><img src="/images/product-promotion/product-promotion-poster.png"></div>
<title>飞马云播-固定翼</title>

<link href="/css/vendor/common.css" type="text/css" rel="stylesheet">
<link href="/css/vendor/cloud-play-mobile-fix.less" type="text/css" rel="stylesheet/less">
<link href="/css/vendor/cloud-play-bar-mobile.less" type="text/css" rel="stylesheet/less">
<script src="/js/less.min.js"></script>
</head>

<body>
<main>
    <!-- 地图 -->
    <div class="map-wrap">
        <div id="map-container"></div>
    </div>
   
    <!-- 标题 -->
    <div class="title-bar">
        <p class="info">
            <span>F1000</span>
            正在执行:
            <span>区块1-Mission 1</span>
        </p>
        <div class="more-btn" onClick="cloudPlayMobileFixM.clickMoreInfo()"></div>
    </div>
    
    <!-- 状态栏 -->
    <div class="status-bar">
        <p class="gps-cnt">12</p>
        <div class="gps-icon"></div>
        
        <!-- 以电量为86%为例, 请使用cloudPlayMobileFixM.updateBatteryPercent(86);来更新电量 -->
        <p id="battery-percent"></p>
        <div id="battery-icon"></div>
        
        <div class="gps-detail">
            <p>PDOP: <span>1.5</span><br>GPS: <span>3D FIX</span></p>
        </div>
        
        <div class="radio-icon"></div>
    </div>
    
    <!-- 底部信息栏 -->
    <div class="bottom-info-wrap">
        <!-- 信息栏 -->
        <div class="info-bar">
            <div class="wrap-1-1">
                <!-- 飞机距我距离 -->
                <div class="drone-to-home"></div>
                <p class="name">方向</p>
                <p class="value">118km</p>
                
                <!-- 飞机位置 -->
                <p class="value"><span>116.23870056</span>&deg;</p>
                <p class="name">东经</p>
                <p class="value"><span>140.23870069</span>&deg;</p>
                <p class="name">北纬</p>
                <div class="drone-location"></div>
            </div>
            <div class="wrap-1-2">
                <div class="wrap-2-1">
                    <ul>
                        <!-- 风速  地速  实时飞行里程  实时飞行时间 -->
                        <li><div class="icon speed-wind-icon"></div><span class="value">00</span>m/s</li>
                        <li><div class="icon speed-land-icon"></div><span class="value">00</span>m/s</li>
                        <li><div class="icon current-miles-icon"></div><span class="value">2000</span>km</li>
                        <li><div class="icon current-time-icon"></div><span class="value">00:00:00</span></li>
                    </ul>
                </div>
                
                <div class="wrap-2-2">
                    <table cellpadding="3" cellspacing="0">
                        <tr>
                            <td class="target-param">
                                <p class="name">目标空速</p>
                                <p class="value">800m/s</p>
                            </td>
                            <td class="icon air-speed"></td>
                            <td class="current-air-speed">15</td>
                        </tr>
                        <tr>
                            <td class="target-param">
                                <p class="name">目标高度</p>
                                <p class="value">5000m</p>
                            </td>
                            <td class="icon height"></td>
                            <td class="current-height">8050</td>
                        </tr>
                    </table>
                </div>
                
                <div class="wrap-2-3">
                    <ul>
                        <li class="temperature-wrap">
                            <div class="icon temperature"></div>
                            <label class="name">机身表面温度</label>
                            <label class="value"><span>44</span>&deg;</label>
                        </li>
                        <li>
                            <div class="icon picture"></div>
                            <label class="name">照片</label>
                            <label class="value">0000016</label>
                        </li>
                        <li>
                            <div class="icon waypoint"></div>
                            <label class="name">航点</label>
                            <label class="value">888/666</label>
                        </li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- 播放栏 -->
        <div class="play-bar">
            <div id="play-or-pause-button" onClick="clickPlayOrPause()"></div>
            <div class="play-progress-container">
                <div id="play-progress-track">
                    <p id="play-progress-cursor">00:33:13</p>
                </div>
                <div id="play-progress-thumb"></div>
                <div id="play-progress-touch-layer"></div>		
            </div>
            <p id="play-progress-duration">02:55:32</p>
        </div>
    </div>
</main>

<div id="more-info-wrap">
    <div class="center-content">
        <div class="item-wrap">
            <h1>工程名称-测区名称-任务1</h1>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>飞机型号</th><td>F1000</td>
                    <th>&nbsp;</th><td>&nbsp;</td>
                </tr>
                <tr>
                    <th>相机类型</th><td>Sony α 5100</td>
                    <th>&nbsp;</th><td>&nbsp;</td>
                </tr>
                <tr>
                    <th>GSD</th><td>5cm</td>
                    <th>比例尺</th><td>1:1000</td>
                </tr>
                <tr>
                    <th>航向重叠</th><td>80%</td>
                    <th>旁向重叠</th><td>80%</td>
                </tr>
                <tr>
                    <th>海拔高度</th><td>500m</td>
                    <th>飞行高度</th><td>150m</td>
                </tr>
                <tr>
                    <th>航线间距</th><td>200m</td>
                    <th>拍照间距</th><td>100m</td>
                </tr>
                <tr>
                    <th>默认空速</th><td>17m/s</td>
                    <th>预计时间</th><td>120min</td>
                </tr>
                <tr>
                    <th>预计面积</th><td>30km²</td>
                    <th>预计里程</th><td>125km</td>
                </tr>
            </table>
        </div>
        <div class="item-wrap">
            <h1>飞行信息</h1>
            <table cellpadding="0" cellspacing="0">
                <tr>
                    <th>飞行日期</th><td>2016-06-03</td>
                    <th>航线起点</th><td>N39.23875</td>
                </tr>
                <tr>
                    <th>开始时间</th><td>10:23:25</td>
                    <th>&nbsp;</th><td>E116.78698</td>
                </tr>
                <tr>
                    <th>结束时间</th><td>10:56:00</td>
                    <th>降落位置</th><td>N66.23875</td>
                </tr>
                <tr>
                    <th>实际用时</th><td>33min</td>
                    <th>&nbsp;</th><td>E168.78698</td>
                </tr>
                <tr>
                    <th>实际飞行</th><td>125km</td>
                    <th>降落方式</th><td>滑降</td>
                </tr>
                <tr>
                    <th>实际拍照</th><td>500张</td>
                    <th>&nbsp;</th><td>&nbsp;</td>
                </tr>
            </table>
        </div>
        <div class="item-wrap">
            <h1>飞机信息</h1>
            <table class="single-row" cellpadding="0" cellspacing="0">
                <tr>
                    <th>飞机编号</th><td>123456789</td>
                </tr>
                <tr>
                    <th>累计飞行</th><td>1250km</td>
                </tr>
                <tr>
                    <th>钥匙编号</th><td>789561234</td>
                </tr>
                <tr>
                    <th>钥匙有效期</th><td>永久</td>
                </tr>
                <tr>
                    <th>驾驶仪版本</th><td>F200_Autpilot_v1.4.4.mf</td>
                </tr>
                <tr>
                    <th>电台版本</th><td>F200_Radio_v1.3.3.bin</td>
                </tr>
                <tr>
                    <th>基站版本</th><td>F200_Dmjz_v1.0.0.000</td>
                </tr>
            </table>
        </div>
    </div>
    
</div>

</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="http://maps.google.cn/maps/api/js?key=AIzaSyCUar8_ccmm1x9Ho0lKa_uFrzyLlAVC17A"></script>
<script src="/js/platform-system.js"></script>
<script src="/js/vendor/cloud-play-bar-mobile.js"></script>
<script src="/js/vendor/cloud-play-mobile-fix.js"></script>
<script>
    
    // 初始化地图
    function initMap(containerID) {
        var mapDiv = $("#" + containerID);
        if (!mapDiv) {
            console.error('Not Found MapBoxDiv:container');
            return false;
        }
        this.mapObject = new google.maps.Map(document.getElementById(containerID), {
            //默认北京天安门
            center: {lat: 22.62481547, lng: 113.90008737},
            zoom: 15,
            //默认卫星地图
            mapTypeId: 'hybrid',
            disableDefaultUI: true,
        });
        return true;
    }
    initMap("map-container");
    
    // 更新电池电量
    cloudPlayMobileFixM.updateBatteryPercent(36);
    // 更新播放进度
    cloudPlayBarMobileM.updatePlayProgress(0.3);
    // 播放进度更新（由于用户seek）
    cloudPlayBarMobileM.playProgressChangedCallback = function(progress) {
        console.log("seek to  " + (progress * 100) + "%");
    };
    
    // 点击了播放/暂停按钮
    function clickPlayOrPause() {
        // 设置播放状态 ture为播放状态 false为暂停状态
        var isPlayState = cloudPlayBarMobileM.isPlayState;
        cloudPlayBarMobileM.setToPlayState(!isPlayState);
    }
</script>
</html>






